import React from 'react';
import { Box, Typography } from '@mui/material';
import IntegrationInstructionsOutlinedIcon from '@mui/icons-material/IntegrationInstructionsOutlined';

// eslint-disable-next-line no-unused-vars
export const ComponentsSection = ({ darkMode = false, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => {
  return (
    <Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <IntegrationInstructionsOutlinedIcon sx={iconSx} />
        <Typography sx={largeHeaderSx}>
          Our Tech Struct
        </Typography>
      </Box>
      
      <Typography sx={listItemSx}>
        Choose between Go API (Gofiber) or Node API (Express) backends with React 18 frontend. Both APIs expose identical endpoints for maximum flexibility.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' } }}>
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            React 18 Frontend
          </Typography>
          <Typography sx={listItemSx}>• react@18 and react-dom@18</Typography>
          <Typography sx={listItemSx}>• react-query for data fetching</Typography>
          <Typography sx={listItemSx}>• react-hook-form for validation</Typography>
          <Typography sx={listItemSx}>• Material UI components</Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Background Processing
          </Typography>
          <Typography sx={listItemSx}>• Scheduled tasks with Gocron/node-cron</Typography>
          <Typography sx={listItemSx}>• Payment notifications</Typography>
          <Typography sx={listItemSx}>• Expiring trial alerts</Typography>
          <Typography sx={listItemSx}>• Subscription status updates</Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Stripe Integration
          </Typography>
          <Typography sx={listItemSx}>• @stripe/stripe-js and @stripe/react-stripe-js</Typography>
          <Typography sx={listItemSx}>• 3D Secure payment processing</Typography>
          <Typography sx={listItemSx}>• Webhook event handling</Typography>
          <Typography sx={listItemSx}>• Customer portal integration</Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Developer Experience
          </Typography>
          <Typography sx={listItemSx}>• Fully customizable codebase</Typography>
          <Typography sx={listItemSx}>• PM2 process management</Typography>
          <Typography sx={listItemSx}>• OpenTelemetry integration</Typography>
          <Typography sx={listItemSx}>• Clear API documentation</Typography>
        </Box>
      </Box>
    </Box>
  );
};